<template>
    <div class="extra-area">
      <div class="page-header">{{ 'Stock Item' }}</div>
    </div>

    <q-card v-if="stock">
      <div class="q-pa-sm">
        <div class="q-gutter-y-md row">
          <div class="col-5 p-status">
            <q-card-section>
              <div class="p-status-field">
                <div class="col-12 fal q-pa-sm">
                  <div>
                    <span class="weight"> Stock Code: </span>
                    {{ stock.stock_code }}
                  </div>
                </div>
                <div class="fal col-12 q-pa-sm">
                  <div>
                    <span class="weight"> System: </span>
                    {{ stock.system }}
                  </div>
                </div>
                <div class="fal col-12 q-pa-sm">
                  <div>
                    <span class="weight"> Short Description: </span>
                    {{ stock.description }}
                  </div>
                </div>
              </div>
            </q-card-section>
          </div>
          <div class="col-7 fac">
            <ChildStockCodeList
              :stockItem="stock"
              v-if="stock.lv5.length == 0"
              :style="'map'"
            ></ChildStockCodeList>
          </div>

          <div class="col-12 q-pa-sm">
            <q-tabs
              v-model="tab"
              dense
              no-caps
              mobile-arrows
              outer-arrows
              class="not-active-tab"
              indicator-color="indigo-8"
              active-class="active-tab"
              align="justify"
              narrow-indicator
            >
              <q-tab name="main" label="Main" icon="feed" />
              <q-tab
                v-if="stock.lv5.length == 0"
                name="child"
                label="Child"
                icon="format_list_numbered"
              />
              <q-tab name="task" label="Task" icon="list" />
              <q-tab name="eDoc" label="eDoc" icon="check_circle_outline" />
              <q-tab
                name="htReplacement"
                label="Replacement"
                icon="event_available"
              />
              <q-tab
                name="improvementWork"
                label="Imp Work"
                icon="receipt_long"
              />
            </q-tabs>

            <q-tab-panels v-model="tab" animated>
              <q-tab-panel name="main">
                <q-card-section class="card-100vh scroll-container no-scroll">
                  <StockItemForm
                    @submit="emit('submit')"
                    :lv="stock.lv5.length == 0 ? 'level 4' : 'level 5'"
                    :from="'edit'"
                    :stockItem="stock"
                    :fixBtn="true"
                  ></StockItemForm>
                </q-card-section>
              </q-tab-panel>

              <q-tab-panel name="child" animated>
                <q-card-section class="stock-card-vh scroll-container no-scroll">
                  <ChildStockCodeList
                    :stockItem="stock"
                    :style="'list'"
                    class="q-pa-sm"
                  ></ChildStockCodeList>
                </q-card-section>
              </q-tab-panel>

              <q-tab-panel name="task">
                <q-card-section class=" no-scroll ">
                  <TaskTable
                    :stock_code="stock.stock_code"
                    :stock_id="stock.id"
                    :style="'list'"
                    class="q-pa-sm "
                  ></TaskTable>
                </q-card-section>
              </q-tab-panel>

              <q-tab-panel name="eDoc" animated>
                <q-card-section class=" no-scroll">
                  <StockItemEDocList
                    :stock-code="stock.stock_code"
                    :stock-item-id="stock.id"
                  />
                </q-card-section>
              </q-tab-panel>
              <q-tab-panel name="improvementWork" animated>
                <q-card-section class=" no-scroll">
                  <StockItemImpWorkList
                    :stock-code="stock.stock_code"
                    :stock-item-id="stock.id"
                  />
                </q-card-section>
              </q-tab-panel>
              

              <q-tab-panel name="htReplacement" animated>
                <q-card-section class=" no-scroll">
                  <StockItemHardTimeReplacement
                    :action="'stock'"
                    :stockCode="stock.stock_code"
                    :stockItemId="stock.id"
                  />
                  
                  <!-- <StockItemHardTimeReplacement
                :parent="false"
                :action="'stock'"
                  :stockCode="stock.stock_code"
                  :stockItemId="stock.id"
                /> -->
                </q-card-section>
              </q-tab-panel>
            </q-tab-panels>
          </div>
        </div>
      </div>
    </q-card>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import ChildStockCodeList from 'src/components/itemMaster/ChildStockCodeList.vue';
import StockItemForm from 'src/components/itemMaster/StockItemForm.vue';
import TrainSVG from 'assets/train/train.svg';
import { fetchAssets } from 'src/services/assetsService';
import { StockItem } from 'src/services/type';
import TaskTable from './TaskTable.vue';
import { useChildMapStore } from 'src/stores/childMapStore';
import StockItemEDocList from '../edoc/StockItemEDocList.vue';
import StockItemHardTimeReplacement from '../htReplacement/StockItemHardTimeReplacement.vue';
import { getStockItem } from 'src/services/stockCodeService';
import StockItemImpWorkList from 'src/components/improvementWork/StockItemImpWorkList.vue';

const emit = defineEmits(['submit', 'close']);

const useChildMap = useChildMapStore();

const tab = ref('');

setTimeout(() => {
  tab.value = 'main';
}, 100);

const showBtn = ref(tab.value == 'main');

const props = defineProps<{
  stockItem: StockItem;
}>();

const stock = ref<StockItem>()

async function init(){
  const res = await getStockItem(props.stockItem.id)
  if (res.data){
    console.log(res.data);
    
    stock.value = res.data
  }
}

init()
async function initSvg(svgUrl: string) {
  const res = await fetchAssets(svgUrl);

  const d = document.getElementById('svg-container');

  if (d) {
    d.innerHTML += res.data;
  }
  const svg = document.getElementById('svg');
  if (svg) {
    // svg.style.width = '100%'
    svg.style.width = `-webkit-fill-available`;
    svg.style.paddingRight = `10px`;
    // svg.style.height =  `100%`
  }
}

useChildMap.getChildStockItemsData(props.stockItem.stock_code);


initSvg(TrainSVG);
</script>

<style scoped>
.status-color-red {
  width: 42px;
  height: 18px;
  background-color: red;
  margin: 5px;
}
.header {
  font-size: 1.4rem;
  font-weight: 900;
  margin: 10px;
}

.card-action {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab-style {
  width: 100px;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 3px;
}

.right-container {
  height: 170px;
  padding-top: 20px;
}

</style>
